<template>
	<div class="day-hours-card">
		<p class="card-title">{{ $t('message.mainStationScreenNews.pageDayTitle') }}</p>

		<div class="indicator-list scroll-container" :style="{ height: isHighResolution ? '18rem' : '13rem' }">
			<div class="indicator-item" v-for="(item, index) in daySendHours" :key="item.id || index">
				<div class="indicator-info">
					<span class="indicator-name">{{ item.name }}</span>
					<span class="indicator-value">{{ item.value }}h</span>
				</div>
				<el-progress :percentage="calculatePercentage(item.value)" :stroke-width="16" :show-text="false" class="custom-progress" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, defineProps, onMounted } from 'vue';

const isHighResolution = ref(false); // 是否高分辨率

// 定义props接收父组件数据
const props = defineProps({
	daySendHours: {
		type: Array as () => Array<{
			id?: number;
			name: string;
			value: number;
		}>,
		default: () => [],
	},
	maxValue: {
		type: Number,
		default: 5,
	},
});

// 计算百分比（基于最大值）
const calculatePercentage = (value: number) => {
	return Math.min(Math.round((value / props.maxValue) * 100), 100);
};

// 组件挂载时初始化
onMounted(() => {
	isHighResolution.value = window.innerWidth >= 1600;
});
</script>

<style scoped lang="scss">
.day-hours-card {
	width: 100%;
	margin: 0 auto;
	padding: 0.9rem;
	padding-top: 0.5rem;
	border-radius: 0.5rem;
	background-color: #11214e;
	border: 1px solid #5aabfb;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 隐藏滚动条 */
.scroll-container::-webkit-scrollbar {
	display: none;
}

.scroll-container {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.card-title {
	color: #48a0f8;
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: 1px;
	margin-bottom: 0.5rem;
}

.indicator-list {
	display: flex;
	gap: 0.5rem;
	overflow-y: auto;
	flex-direction: column;
}

.indicator-item {
	display: flex;
	gap: 0.3rem;
	flex-direction: column;
}

.indicator-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.indicator-name {
	font-size: 1rem;
	font-weight: bold;
	color: rgba(255, 255, 255, 0.9);
}

.indicator-value {
	font-size: 0.8rem;
	color: #409eff;
	font-weight: 500;
}

.custom-progress {
	:deep(.el-progress-bar__outer) {
		background-color: rgba(55, 126, 149, 0.3);
		border-radius: 8px;
	}

	:deep(.el-progress-bar__inner) {
		background: linear-gradient(90deg, #377e95 0%, #64d9f3 100%);
		border-radius: 8px;
	}
}
</style>
